<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
    }
    #box2
    {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        left: 200px;
        top: 200px;
    }
    #图一
    {
        width: 300px;
        height: 300px;
    }
    </style>

    <script type="text/javascript">
        
        //元素拖拽代码一个一个定义过于麻烦，可以尝试进行封装
        //提取一个专门用来设置拖拽的函数,拖拽英文trag
        //传递一个参数：开启拖拽的元素obj
        function drag(obj)
        {
            obj.onmousedown=function(event)
            {
                //div的水平偏移量 鼠标.clentX-元素.offsetLeft
                //div的垂直偏移量 鼠标.clentY-元素.offsetTo
                var ol=event.clientX - obj.offsetLeft;
                var ot=event.clientY - obj.offsetTop;

                //给document绑定一个onmousemove 
                document.onmousemove=function(event)
                {
                    //console.log(event);
                    //当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
                    //获取鼠标的坐标
                    var left=event.clientX-ol;
                    var top=event.clientY-ot;
                    //修改box1的位置
                    obj.style.left=left+"px";//横纵坐标加一个-50，能使鼠标移动点固定在元素中间
                    obj.style.top=top+"px";
                };

                //为元素绑定一个鼠标松开事件
                document.onmouseup=function()
                {
                    //当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
                    //取消document的onmousemove事件
                    document.onmousemove=null;
                    //取消document的onmouseup事件
                    document.onmouseup=null;
                };
                //当我们拖拽一个网页中的内容时，该浏览器会默认去搜索引擎中搜索内容
                //此时会导致拖拽功能的异常，这个是浏览器的默认行为
                //如果不希望发生这个行为，则可以通过return false来取消默认行为
                return false;
                //IE8不兼容

                
            };
        }
        window.onload=function()
        {
            //拖拽的流程
            //1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
            //2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
            //3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
            
            //获取box1
            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            var img1=document.getElementById("图一");
            drag(box1);
            drag(box2); 
            drag(img1);
           
        };
    </script>
</head>
<body>
    <!--谷歌浏览器Ctrl+A全选页面内容然后拖动，不会出现连带元素一起拖动的情况-->
    我是一段文字
    <div id="box1"></div>
    <div id="box2"></div>
    <img id="图一" src="../伊蕾娜素材/图一.jpeg" style="position: absolute;">
</body>
</html>